<template>
  <a-modal v-model:visible="visible" v-if="visible" title="发货" @ok="handleOk" @cancel="handleCancel" width="750px">
    <a-form :model="form" :rules="rules" :label-col="{ style: { width: '140px' } }" ref="formRef">
      <a-row gutter="16">
        <a-col span="24">
          <a-form-item label="快递公司" name="expressCompany" required>
            <a-input v-model:value="form.expressCompany" placeholder="请输入快递公司" />
          </a-form-item>
        </a-col>

        <a-col span="24">
          <a-form-item label="快递单号" name="expressNumber" required>
            <a-input v-model:value="form.expressNumber" placeholder="请输入快递单号" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <div class="d-j-around">
        <a-button @click="handleCancel" class="d-a-center">取消</a-button>
        <a-button type="primary" @click="handleOk" class="d-a-center">确认</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {} from '@/api'
import { vipSendBag } from '@/api/content/index'

onMounted(() => {})
const visible = ref(false)
const formRef = ref()
const emit = defineEmits(['submit'])
const useForm = () => {
  return {
    nurseId: '',
    expressCompany: '',
    expressNumber: ''
  }
}
const form = ref(useForm())
const rules = {
  expressCompany: [{ required: true, message: '请输入快递公司' }],
  expressNumber: [{ required: true, message: '请输入快递单号' }]
}

const handleOk = () => {
  formRef.value
    .validate()
    .then(async () => {
      let obj = {
        ...form.value
      }
      console.log(obj)
      let res = await vipSendBag(obj) // 传递 form.value

      if (res.success) {
        message.success('提交成功')
        emit('submit')
        handleCancel()
      }
    })
    .catch(() => {
      message.error('请填写完整信息')
    })
}

const handleCancel = () => {
  form.value = useForm()
  visible.value = false
}

const showModal = data => {
  // form.value.orderJson = data.join(',')
  if (data) {
    form.value = {
      ...form.value,
      ...data
    }
  }
  visible.value = true
}
const handleRemoveVideo = () => {
  form.value.videoList = []
}
defineExpose({
  showModal
})
</script>

<style scoped>
.ant-form-item {
  margin-bottom: 16px;
}
.ant-form-item-label {
  font-weight: 500;
  width: 120px !important;
  text-align: right;
  flex: 0 0 120px;
}
.ant-form-item-label > label {
  min-width: 120px;
  justify-content: flex-end;
}
.ant-input {
  width: 100%;
}
.invoice-type-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.current-date {
  font-size: 14px;
  color: #666;
  margin-left: auto;
}
</style>
